<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>过渡</title>
		<style>
			.box{
				width: 300px;
				height: 300px;
				background-color: aqua;
				/* 过渡transition:过渡属性 花费的时间 速度 延迟;
				 ease:默认值，慢快慢
				 ease-in:慢-快
				 ease-out:快-慢
				 ease-in-out:低速开始，低速结束
				 linear:匀速
				 */
				
				transition: all 3s linear 0.5s;
			}
			.box:hover{
				width: 900px;
				height: 100px;
				background-color: bisque;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: antiquewhite;
				transition:transform 2s linear ;
				/* 转换的中心点：
				transform-origin:水平方向，垂直方向；
				可以方位词，px，%。
				*/
			}
			.box2:hover{
				/* transform: 转换
				1.taranslate(x,y):位移 taranslatex:x轴方向 taranslatey:y轴方向
				2.scale(倍数):缩放
				3.rotate():旋转，单位deg;正顺时针，负逆时针。
				4.rotatey():Z轴旋转，单位deg
				5.skew()倾斜，单位deg
				
				*/
				transform: translate(100px,200px);
				transform: scale(2);
				transform:rotate(45deg);
				
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="box2"></div>
	</body>
</html>
